<template>
    <div class="approval">
        <el-card class="approval_list">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb_post">
                <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
                <el-breadcrumb-item>审批</el-breadcrumb-item>
                <el-breadcrumb-item>申请审批</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table :data="approvals" ref="approvalsTable" style="width: 95%; margin: auto;" stripe>
                <el-table-column
                label="申请编号"
                prop="appID" width="70" align="center">
                </el-table-column>
                <el-table-column
                label="审批人编号"
                prop="empID" width="100">
                </el-table-column>
                <el-table-column
                label="审批时间"
                prop="time" width="120">
                </el-table-column>
                <el-table-column
                label="审批状态" width="160">
                    <template slot-scope="scope">
                        <p>{{leave_state[scope.row.type+1]}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                label="是否批准" width="80">
                    <template slot-scope="scope">
                        <p v-if="scope.row.approval" style="color:green">批准</p>
                        <p v-else style="color:crimson">拒绝</p>
                    </template>
                </el-table-column>
                <el-table-column
                label="审批意见"
                prop="comment">
                </el-table-column>
                <el-table-column
                label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editApproval(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteApproval(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="编辑审批意见" :visible.sync="editVisible">
            <el-form>
                <el-form-item label="是否批准">
                    <el-select v-model="status_approval" placeholder="选择意见">
                        <el-option label="批准" value=true></el-option>
                        <el-option label="拒绝" value=false></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="confirmEdit">提交</el-button>
            </el-form>
        </el-dialog>
        <el-dialog title="删除审批意见" :visible.sync="deleteVisible">
            <el-button style="width:15%; margin:auto;" type="danger" @click="confirmDelete">确认</el-button>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            approvals: [],
            status_approval: '',
            approval_editing: {},
            approval_deleting: {},
            editVisible: false,
            deleteVisible: false,
            leave_state: ['被拒绝', '待部门经理审批', '待副总经理审批', '待总经理审批', '已批准'],
        }
    },
    methods: {
        findIndex(arr, obj) {
            let obj_str = JSON.stringify(obj);
            return arr.reduce((index, element, i) => {
                if (JSON.stringify(element) == obj_str) {
                    return i;
                }
                else {
                    return index;
                }
            })
        },
        date2Str(date) {
            let month = (date.getMonth() > 9? date.getMonth() : "0" + date.getMonth());
            let day = (date.getDate() > 9? date.getDate() : "0" + date.getDate());
            return date.getFullYear() + '-' + month + '-' + day;
        },
        confirmEdit() {
            let that = this;
            fetch('http://localhost:9095/AttendanceSystem/leave/id' + '?appID=' + that.approval_editing.appID, {
                method: 'GET',
                headers: new Headers({
                    "Token": that.$store.state.token,
                    "username": that.$store.state.username,
                    "Content-Type": 'application/json'
                })
            }).then(res => res.json())
            .then(json => {
                let e_id = json[0].empID;
                let a_id = json[0].appID;
                console.log
                fetch('http://localhost:9095/AttendanceSystem/leave/', {
                    method: 'PUT',
                    headers: new Headers({
                        "Token": that.$store.state.token,
                        "username": that.$store.state.username,
                        "Content-Type": 'application/json'
                    }),
                    body: JSON.stringify({
                        Leave: {
                            empID: e_id,
                            appID: a_id,
                            state: (that.status_approval == 'true'? that.$store.state.auth + 1 : '0')
                        }
                    })
                }).then(res => {
                    if (res.status == 200) {
                        fetch('http://localhost:9095/AttendanceSystem/approval/', {
                            method: 'PUT',
                            headers: new Headers({
                                "Token": that.$store.state.token,
                                "username": that.$store.state.username,
                                "Content-Type": 'application/json',
                            }),
                            body: JSON.stringify({
                                Approval: {
                                    appID: that.approval_editing.appID,
                                    empID: that.$store.state.username,
                                    type: that.$store.state.auth,
                                    approval: that.status_approval
                                }
                            })
                        }).then(res => {
                            if(res.status == 200) {
                                that.updateData();
                                that.$message.success('修改成功');
                                that.editVisible = false;
                            }
                        })
                    }
                })
            })
        },
        confirmDelete() {
            let that = this;
            fetch('http://localhost:9095/AttendanceSystem/leave/id' + '?appID=' + that.approval_deleting.appID, {
                method: 'GET',
                headers: new Headers({
                    "Token": that.$store.state.token,
                    "username": that.$store.state.username,
                    "Content-Type": 'application/json'
                })
            }).then(res => res.json())
            .then(json => {
                let e_id = json[0].empID;
                let a_id = json[0].appID;
                fetch('http://localhost:9095/AttendanceSystem/leave/', {
                    method: 'PUT',
                    headers: new Headers({
                        "Token": that.$store.state.token,
                        "username": that.$store.state.username,
                        "Content-Type": 'application/json'
                    }),
                    body: JSON.stringify({
                        Leave: {
                            empID: e_id,
                            appID: a_id,
                            state: that.$store.state.auth
                        }
                    })
                }).then(res => {
                    if (res.status == 200) {
                        fetch('http://localhost:9095/AttendanceSystem/approval/' + '?appID=' + that.approval_deleting.appID + '&empId=' + that.$store.state.username, {
                            method: 'DELETE',
                            headers: new Headers({
                                "Token": that.$store.state.token,
                                "username": that.$store.state.username,
                                "Content-Type": 'application/json'
                            })
                        }).then(res => {
                            if(res.status == 200) {
                                that.updateData();
                                that.$message.success('删除成功');
                                that.deleteVisible = false;
                            }
                        })
                    }
                })
            })
        },
        editApproval(row) {
            this.approval_editing = row;
            this.editVisible = true;
        },
        deleteApproval(row) {
            this.approval_deleting = row;
            this.deleteVisible = true;
        },
        updateData() {
            let that = this;
            fetch('http://localhost:9095/AttendanceSystem/approval/id' + '?empID=' + that.$store.state.username, {
                method: 'GET',
                headers: new Headers({
                    'Content-Type': 'application/json',
                    'username': (that.$store.state.username == null? sessionStorage.getItem("username") : that.$store.state.username),
                    'Token': (that.$store.state.token == null? sessionStorage.getItem("token") : that.$store.state.token)
                })
            }).then(res => res.json())
            .then(json => {
                that.approvals = json;
            })
        }
    },
    beforeRouteEnter(to, from, next) {
        console.log('from', from.path, 'to', to.path);
        next(vm => {
            if (vm.$store.state.auth >= 1) {
                vm.updateData();
            }
            else {
                vm.$router.push('/info');
                vm.$message({
                    showClose: true,
                    type: 'error',
                    message: '权限不足'
                });
            }
        })
    }
}
</script>

<style>
.approval_list {
    margin-top: 1%;
    margin-left: 3%;
    margin-right: 3%;
}
.breadcrumb_post {
    margin-bottom: 1%;
}
</style>